<template>
  <div class="wrap">
    <div class="header">
      <img src="../img/header.png" alt />
    </div>
    <!-- 同步名和头像 -->
    <div class="two">
      <dl>
        <dt>
          <img :src="name.img" alt />
        </dt>
        <dd>{{name.username}}</dd>
      </dl>
    </div>
    <div class="three">
      <a href="./newhouse">
        <dl>
          <dt>
            <img src="../img/188.png" alt />
          </dt>
          <dd>新房</dd>
        </dl>
      </a>
      <a href="/secondhouse">
        <dl>
          <dt>
            <img src="../img/188.png" alt />
          </dt>
          <dd>二手房</dd>
        </dl>
      </a>
      <a href="/rentalhouse">
        <dl>
          <dt>
            <img src="../img/188.png" alt />
          </dt>
          <dd>租房</dd>
        </dl>
      </a>
    </div>
    <div class="four">
      <div class="menuimg">
        <dl @click="tomessage()">
          <dt>
            <img src="../img/message.png" alt />
          </dt>
          <dd>消息</dd>
        </dl>
        <dl @click="towantbuy()">
          <dt>
            <img src="../img/house.png" alt />
          </dt>
          <dd>求购</dd>
        </dl>
        <dl @click="towantrent()">
          <dt>
            <img src="../img/house.png" alt />
          </dt>
          <dd>求租</dd>
        </dl>
        <dl @click="toproperty()">
          <dt>
            <img src="../img/xing.png" alt />
          </dt>
          <dd>楼市圈</dd>
        </dl>
        <dl @click="tobo()">
          <dt>
            <img src="../img/cenima.png" alt />
          </dt>
          <dd>直播</dd>
        </dl>
        <dl @click="totuan()">
          <dt>
            <img src="../img/yellow.png" alt />
          </dt>
          <dd>团购</dd>
        </dl>
        <dl @click="topai()">
          <dt>
            <img src="../img/yellow.png" alt />
          </dt>
          <dd>排行榜</dd>
        </dl>
        <dl @click="toji()">
          <dt>
            <img src="../img/chuizi.png" alt />
          </dt>
          <dd>战绩</dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../utils/request";
export default {
  name: "", //同步名和头像
  date() {
    return {
      list: [],
      name: {}
    };
  },
  created() {
    //判断token
    const token = localStorage.getItem("token");
    if (!token) {
      this.$router.push("/login");
    }

    //接收同步名和头像
    this.name = JSON.parse(localStorage.getItem("xj"));
  },
  methods: {
    tomessage() {
      this.$router.push("/message");
    },
    towantbuy() {
      this.$router.push("/wantbuy");
    },
    towantrent() {
      this.$router.push("/wantrent");
    },
    toproperty() {
      this.$router.push("/property");
    },
    tobo() {
      this.$router.push("/bo");
    },
    totuan() {
      this.$router.push("/tuan");
    },
    topai() {
      this.$router.push("/pai");
    },
    toji() {
      this.$router.push("/ji");
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
.two {
  width: 100%;
  height: 220px;
  text-align: center;
  align-items: center;
  background: rgb(56, 121, 240);
  dl {
    margin-top: 20px;
    dt img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    dd {
      color: #fff;
      margin-top: 10px;
      font-size: #fff;
    }
  }
}
.three {
  width: 90%;
  position: fixed;
  top: 200px;
  height: 100px;
  background: #fff;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  align-items: center;
  text-align: center;
  margin: 20px 5%;
  border-radius: 15px;
  box-shadow: 0 0 2px 2px #f1f1f1;
  a {
    dl {
      dt img {
        width: 55px;
        height: 35px;
      }
      dd {
        color: #999;
        font-size: 14px;
      }
    }
  }
}
.four {
  margin-top: 60px;
  width: 100%;
  .menuimg {
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    dl {
      width: 33.3%;
      text-align: center;
      align-items: center;
      margin-top: 20px;
      dt img {
        width: 44px;
        height: 40px;
      }
      dd {
        font-size: 14px;
        margin-top: 5px;
        color: #333;
      }
    }
  }
}
</style>
